<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>内补丁padding</title>
  <style>
    span{
      background-color: pink;
      border: 1px solid blue;
    }
    /*1. 设置盒子四个方向的内补丁(上、右、下、左)*/
    .sp1{
      /*padding-top:10px;*/
      /*padding-right: 8px;*/
      /*padding-bottom: 6px;*/
      /*padding-left: 4px;*/
      /*可以简化为：*/
      padding: 10px 8px 6px 4px;
    }
    /*2. 设置三个值的内补丁（上内补丁、左右内补丁、下内补丁）*/
    .sp2{
      background-color: lightyellow;
      padding: 20px 10px 5px;
    }
    /*3. 设置两个值的内补丁（上下、左右）*/
    .sp3{
      background-color: lightblue;
      padding: 10px 20px;
    }
    /*4. 设置一个值的内补丁（四个方向的内补丁相等的）*/
    .sp4{
      background-color: lightsalmon;
      padding: 15px;
    }
  </style>
</head>
<body>
<h2>1. 盒子的内补丁padding- 描述盒子的边框与内容间的间距<hr></h2>
  <span class="sp1">设置四个方向内补丁(上、右、下、左)</span><br><br><br><br>
  <span class="sp2">设置三个值的内补丁(上、左右、下)</span> <br><br> <br>
  <span class="sp3">设置两个值的内补丁（上下、左右）[经常用]</span> <br><br><br><br>
  <span class="sp4">设置一个值的内补丁（四个方向的内补丁相等的）[偶尔用]</span>
</body>
</html>
